/**
在 Webpack 中，自定义 Loader 是一种强大的功能，允许开发者根据特定需求处理和转换模块的内容。通过自定义 Loader，可以实现对不同类型文件的处理，满足项目的特殊需求。
  1. 什么是 Loader？
  Loader 是 Webpack 中的一个核心概念，用于将模块的源代码转换为有效的模块。Loader 可以处理不同类型的文件，如 JavaScript、CSS、图片等。Webpack 本身只理解 JavaScript，因此需要通过 Loader 来处理其他类型的文件。

  2. 自定义 Loader 的优势
  - 灵活性: 开发者可以根据项目需求创建特定的 Loader，处理特定类型的文件。
  - 代码复用: 自定义 Loader 可以在多个项目中复用，提高开发效率。
  - 特定功能: 可以实现特定的功能，如转换模板、编译预处理器代码等。

  3. 创建自定义 Loader
   1. 创建 Loader 文件
  自定义 Loader 通常是一个 Node.js 模块，导出一个函数，该函数接受源代码并返回处理后的结果。
   示例 Loader：

  ``` javascript
  // my-loader.js
  module.exports = function (source) {
      // 在这里处理源代码
      const result = source.replace(/console\.log/g, ''); // 删除 console.log
      return result; // 返回处理后的代码
  };
  ``` 


   2. 使用 Loader
  在 Webpack 配置中，可以通过 `module.rules` 来使用自定义 Loader。

   示例 Webpack 配置：


  ``` javascript
  const path = require('path');

  module.exports = {
      entry: './src/index.js',
      output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist'),
      },
      module: {
          rules: [
              {
                  test: /\.js$/, // 匹配所有 .js 文件
                  use: path.resolve(__dirname, 'my-loader.js'), // 使用自定义 Loader
                  exclude: /node_modules/, // 排除 node_modules
              },
          ],
      },
      mode: 'production', // 设置为生产模式
  };
  ``` 

  4. Loader 的异步处理
  自定义 Loader 还可以支持异步处理。通过调用 `this.async()` 方法，可以将 Loader 变为异步 Loader。
   示例异步 Loader：

  ``` javascript
  // async-loader.js
  module.exports = function (source) {
      const callback = this.async(); // 进入异步模式

      setTimeout(() => {
          const result = source.replace(/console\.log/g, ''); // 删除 console.log
          callback(null, result); // 调用回调函数返回结果
      }, 1000); // 模拟异步操作
  };
  ``` 

  5. 使用 Loader 的注意事项
  - 性能: 自定义 Loader 的性能可能会影响构建速度，因此需要注意 Loader 的实现效率。
  - 错误处理: 在 Loader 中处理错误时，可以通过调用 `callback` 的第一个参数传递错误信息。
  - 链式 Loader: 可以将多个 Loader 链接在一起，处理同一文件的不同方面。

  总结
  自定义 Loader 是 Webpack 的一项强大功能，允许开发者根据特定需求处理模块的内容。通过创建和使用自定义 Loader，可以灵活地处理不同类型的文件，实现项目的特定功能。希望这个总结对你理解 Webpack 中的自定义 Loader 有所帮助！
 */
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js",
  },
  // resolveLoader表示解析loader的路径
  resolveLoader: {
    modules: ["node_modules", "./loaders"],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          // "loader01",
          // "loader02",
          // "loader03",
          {
            loader: "loader04",
            // 给loader传递参数
            options: {
              name: "custom-loader-name",
              age: 18,
            },
          },
          // {
          //   loader: "babel-loader",
          //   options: {
          //     plugins: [],
          //     presets: []
          //   }
          // }
        ],
      },
      {
        test: /\.js$/,
        use: "loader01",
      },
      {
        test: /\.js$/,
        use: "loader02",
        enforce: "post",
      },
      {
        test: /\.js$/,
        use: "loader03",
      },
    ],
  },
};
